<template>
    <div>
        <mt-header class="plain" fixed>
            <mt-button slot="left" icon="back" @click="goBack">返回</mt-button>
            <div slot="right">
                <!-- <div class="icon"><img width="24" :src="img.more" alt="更多" @click="showMore"></div> -->
            </div>
        </mt-header>
        
        <div class="info-container text-justify">
            <div class="info-title py-5 text-center">
                {{info.title}}
            </div>
            <div class="info-time text-center" v-if="info.createtime">
                <div class="line"></div>
                <span class="text">{{info.createtime}}</span>
            </div>
            <!-- <div class="info-video bg-light-gray" v-show="showImg">
                <img :src="info.coverurl" alt="封面" @error="showImg = false">
            </div>
            <div class="info-desc text-left">
                {{info.desc}}
            </div>
             -->
            <div class="text-justify">
                <div v-html="info.content"></div>
            </div>
            <!-- <div v-html="info.content"></div> -->
        </div>

        <div class="info-footer color-light-gray">
            <div class="x-row">
                <div class="x-col-6">
                    <div class="oper" @click="doLike">
                        <div class="img pt-1">
                            <img :src="liked ? img.liked : img.like" alt="点赞">
                        </div>
                        <div :class="{'text': true, 'color-default': liked}">
                            {{likedCount}}
                        </div>
                    </div>
                </div>
                <div class="x-col-6">
                    <div class="oper" @click="doCollect">
                        <div class="img pt-1">
                            <img :src="img.comment" alt="评论" >
                        </div>
                        <div :class="{'text': true, 'color-default': true}">
                            评论
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import likeImg from '@/assets/images/info/点赞.png'
import likedImg from '@/assets/images/info/已点赞.png'
import collectImg from '@/assets/images/info/收藏.png'
import collectedImg from '@/assets/images/info/已收藏.png'
import moreImg from '@/assets/images/info/更多.png'
import commentImg from '@/assets/images/课程学习_文稿_选中.png'
import infoApi from '@/api/info'
import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import { MessageBox } from 'mint-ui'
import utils from '@/utils'

export default {
    data() {
        return {
            img: {
                like: likeImg,
                liked: likedImg,
                collect: collectImg,
                collected: collectedImg,
                more: moreImg,
                comment: commentImg
            },

            info: {
            },

            liked: false,
            collected: false,
            showImg: true,
            likedCount: 0
        }
    },

    created() {
        this.getLikeInfo();
        this.getLikedCount();
        this.getDetail();
    },

    methods: {
        
        goBack() {
            if (this.$route.query.from) {
                this.$router.push('/' + this.$route.query.from.replace(/-/g, '/'))
            } else {
                this.$router.push('/information')
            }
        },
        
        getDetail() {
            const id = this.$route.query.id || '';
            if (!id) {
                Toast('出错了 ...');
            }

            infoApi.getInfoDetail({
                params: {
                    infoid: id
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT];
                this.info = result || {};
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE] || '获取失败');
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        showMore() {
            this.$router.push({path: '/information/more', query: {id: this.$route.query.id}});
        },

        getLikeInfo() {
            const id = this.$route.query.id || '';
            if (!id) {
                return;
            }

            if (!utils.getUserToken()) {
                return
            }

            infoApi.getThumbsUpInfo({
                params: {
                    infoid: id
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT];
                this.liked = !!result;
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE] || '获取失败');
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        getLikedCount() {
            
            const id = this.$route.query.id || '';
            if (!id) {
                return;
            }
            
            infoApi.getThumbsUpCount({
                params: {
                    infoid: id
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT] || 0;
                this.likedCount = result;
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE] || '获取失败');
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        doLike() {
            const id = this.$route.query.id || '';
            if (!id) {
                return;
            }

            if (!utils.getUserToken()) {
                MessageBox.confirm('您还没有登录，现在要登录吗？', '温馨提示', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    closeOnClickModal: false,
                    type: 'info'
                }).then(() => {
                    this.$router.replace('/login')
                }).catch()
                return
            }

            infoApi.toggleThumbsUp({
                params: {
                    infoid: id
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT];
                this.liked = !this.liked;
                this.getLikedCount()
            }).catch((resp) => {
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
                }
            });
        },

        doCollect() {
            //this.collected = !this.collected;
            this.$router.push({
                path: '/information/comment',
                query: {
                    id: this.$route.query.id || '',
                    from: this.$route.query.from || ''
                }
            })
        },


    }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$scale: 1.2;
.info-container {
    margin-top: 60px;
    margin-bottom: 60px;
    margin-left: $offset-x;
    margin-right: $offset-x;
    font-size: 16px;

    .info-title {
        font-size: 24px * $scale;
        line-height: 34px;
    }

    .info-time {
        $color: #666666;
        font-size: 12px * $scale;
        padding: 15px 50px;
        color: $color;
        position: relative;
        
        .line {
            position: relative;
            top: 9px;
            width: 100%;
            height: 1px;
            background-color: $color;
            max-height: 1px;
        }

        .text {
            position: relative;
            padding: 0 10px;
            background: #ffffff;
        }
    }

    .info-desc {
        margin-top: 12px;
        font-size: 14px * $scale;
        color: #bbbbbb;
    }

    .info-content {
        font-size: 20px * $scale;
        color: #010101;

    }
}

.info-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    border-top: 1px solid #dddddd;

    .img img {
        width: 20px;
    }

    .oper {
        width: 26px;
        display: inline-block;
    }
}
</style>
